<{include file="top.html"}>
<link rel="stylesheet" href="<{$preStaticUrl}>Wap/v2/css/mui.picker.min.css?v=<{$resVersion}>" />
<script src="<{$preStaticUrl}>Wap/v2/js/mui.min.js"></script>
<script src="<{$preStaticUrl}>Wap/v2/js/mui.picker.min.js"></script>
<style>
    #tmp{display:none}
    .rmbtn{
        color:#fe0090;
        float: right;
        margin-right: 1em;
    }

    .mui-backdrop {
        position: fixed;
        z-index: 998;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.3);
    }
    .mui-dtpicker-title {
        display: none;
    }
    .mui-poppicker-header, .mui-dtpicker-header {
        padding: 0.27rem 0.3rem;
        background: #fff;
    }
    .mui-poppicker-header .mui-btn, .mui-dtpicker-header .mui-btn {
        padding: 0;
        background: none;
        border: 0;
        font-size: 1.6rem;
        color: #ff5685;
    }

    .mui-picker {
        background: #f4f4f4;
    }

    .mui-pciker-rule-ft {
        border: 0;
        background: #E5E5E5;
        z-index: 1;
    }
    .getCode{display: inline-block;
        border: 1px solid red;
        padding: 0.5rem;
        border-radius: 0.5rem;
        margin-left: 0.5rem;}
</style>
</head>
<body>
<div class="xy-panel">
    <div class="xy-panel-top">
        <div class="xy-titlebar">
            <div class="xy-titlebar-title" style="margin: 0 auto"><{$title}></div>
            <div class="xy-titlebar-right"></div>
        </div>
    </div>
    <div class="xy-panel-content" style="bottom:0;padding:1rem 0;top:4rem">
        <div class="xy-row vDirectionRow">
            <form id="tab_mo_2" >
                <dl class="Annotate">注：加*号为必填项</dl>
                <ul class="con_ui-list integrate_ui-list">
                    <li class="ui-list">
                        <i>家长姓名：</i>
                        <span><input type="text" name="realname" placeholder="请输入家长姓名" value="<{$babyInfo['parentName']}>"/></span>
                    </li>
                    <{if strlen($userinfo.bindPhone) gt 9}>
                        <li class="ui-list">
                            <i><span style="color:red">*</span>联系电话：</i>
                            <span><input type="tel" name="phone" placeholder="请输入联系电话" value="<{$userinfo.bindPhone}>" readonly /></span>
                        </li>
                    <{else}>
                        <li class="ui-list">
                            <i><span style="color:red">*</span>联系电话：</i>
                            <span><input type="tel" id="phone" name="phone" placeholder="请输入联系电话" value="<{$babyInfo['phone']}>" required/></span>
                        </li>
                        <li class="ui-list">
                            <i><span style="color:red">*</span>验证码：</i>
                            <span><input type="tel" name="code" placeholder="请输入短信验证" value="" required/><a href="javascript:void(0);" class="getCode">获取验证码</a></span>
                        </li>
                    <{/if}>
                </ul>
                <ul class="con_ui-list integrate_ui-list">
                    <li class="ui-list">
                        <i class="address-icon">详细地址：</i>
                    </li>
                    <li class="address_Newbox">
                        <i class="addressArea"><textarea name="address" placeholder="快递可以配送到的地址"><{$babyInfo['address']}></textarea></i>
                    </li>
                </ul>
                <dl class="Annotate">宝贝信息</dl>
                <ul class="con_ui-list integrate_ui-list">
                    <li class="ui-list">
                        <i><span style="color:red">*</span>宝贝昵称：</i>
                        <span><input type="text" name="nickname[]" placeholder="请输入宝贝昵称" value="<{$babyInfo['babyName1']}>" required/></span>
                    </li>
                    <li class="ui-list">
                        <i>宝贝性别：</i>
                        <span><input type="text" readonly class="sex" name="sex[]" placeholder="男/女" value="<{$babyInfo['babySex1']}>"/></span>
                    </li>
                    <li class="ui-list">
                        <i><span style="color:red">*</span>宝贝生日：</i>
                        <span><input class="date" type="text" readonly name="birthday[]" placeholder="YYYY-MM-DD" value="<{$babyInfo['babyBirthday1']}>"/></span>
                    </li>
                </ul>
                <{if $babyInfo['babyName2']}>
                <dl class="Annotate">宝贝信息   <a class="rmbtn" onclick="remove(this)">移除</a></dl>
                <ul class="con_ui-list integrate_ui-list">
                    <li class="ui-list">
                        <i><span style="color:red">*</span>宝贝昵称：</i>
                        <span><input type="text" name="nickname[]" placeholder="请输入宝贝昵称" value="<{$babyInfo['babyName2']}>" required/></span>
                    </li>
                    <li class="ui-list">
                        <i>宝贝性别：</i>
                        <span><input type="text" readonly class="sex" name="sex[]" placeholder="男/女" value="<{$babyInfo['babySex2']}>"/></span>
                    </li>
                    <li class="ui-list">
                        <i><span style="color:red">*</span>宝贝生日：</i>
                        <span><input class="date" type="text" readonly name="birthday[]" placeholder="YYYY-MM-DD" value="<{$babyInfo['babyBirthday2']}>"/></span>
                    </li>
                </ul>

                    <{if $babyInfo['babyName3']}>
                    <dl class="Annotate">宝贝信息   <a class="rmbtn" onclick="remove(this)">移除</a></dl>
                    <ul class="con_ui-list integrate_ui-list">
                        <li class="ui-list">
                            <i><span style="color:red">*</span>宝贝昵称：</i>
                            <span><input type="text" name="nickname[]" placeholder="请输入宝贝昵称" value="<{$babyInfo['babyName3']}>" required/></span>
                        </li>
                        <li class="ui-list">
                            <i>宝贝性别：</i>
                            <span><input type="text" readonly class="sex" name="sex[]" placeholder="男/女" value="<{$babyInfo['babySex3']}>"/></span>
                        </li>
                        <li class="ui-list">
                            <i><span style="color:red">*</span>宝贝生日：</i>
                            <span><input class="date" type="text" readonly name="birthday[]" placeholder="YYYY-MM-DD" value="<{$babyInfo['babyBirthday3']}>"/></span>
                        </li>
                    </ul>
                    <{/if}>
                <{/if}>

                <{if !$babyInfo}>
                <div class="ui-button ui-button-2">
                    <a href="javascript:void(0);" onclick="moreBaby()">增加宝贝</a><br />
                    <a href="javascript:void(0);" onclick="submitInfo()">提交信息</a>
                </div>
                <{/if}>

            </form>

        </div>
    </div>
</div>

<div id="tmp" >
    <dl class="Annotate">宝贝信息   <a class="rmbtn" onclick="remove(this)">移除</a></dl>
    <ul class="con_ui-list integrate_ui-list">
        <li class="ui-list">
            <i><span style="color:red">*</span>宝贝昵称：</i>
            <span><input type="text" name="nickname[]" placeholder="请输入宝贝昵称" value="" required/></span>
        </li>
        <li class="ui-list">
            <i>宝贝性别：</i>
            <span><input type="text" readonly class="sex" name="sex[]" placeholder="男/女" value=""/></span>
        </li>
        <li class="ui-list">
            <i><span style="color:red">*</span>宝贝生日：</i>
            <span><input class="date" type="text" readonly name="birthday[]" placeholder="YYYY-MM-DD" value=""/></span>
        </li>
    </ul>
</div>
</body>
</html>

<script>
    var smsUrl = "./api.php?m=api&c=Sms&a=sendSmsCode";
    $(document).ready(function(){
        $(".date").click(bindDate);
        $(".sex").click(bindSex);



        $(".getCode").on('click', function () {
            var phone = $("#phone").val();
            if (!validatePhone(phone)) {
                layer.msg('请输入正确的手机号码');
                return false;
            }
            $.getJSON(smsUrl, {phone:phone,bind:1}, function(data){
                layer.msg(data.msg);
                if(data.status == 0) {
                    flag = false;
                    $('.getCode').html('<font>60</font>秒后获取');
                    timer = setInterval(countDown, 1000);
                }
            });
        });

        var timer;
        var flag = true;
        var countDown = function CountDown() {
            var maxtime = parseInt($(".getCode font").html());
            if(maxtime>0){
                --maxtime;
                $('.getCode font').html(maxtime);
            }else{
                clearInterval(timer);
                $('.getCode').html('获取验证码');
                flag = true;
            }
        }




    });

    function moreBaby(){
        var num=$('.integrate_ui-list').length
        if(num>=6){
            layer.msg("至多可加提交三位宝宝信息");
            return;
        }
        var newElement=$('#tmp').clone().removeAttr('id').insertBefore('.ui-button-2').show();
        newElement.find('.date').click(bindDate);
        newElement.find('.sex').click(bindSex);

    }

    function remove(obj){
        var $obj=$(obj).parent();
        $obj.next().remove();
        $obj.remove();
    }


    function submitInfo(){
        var param = $("#tab_mo_2").serialize();
        $.post('',param,function(res){
            if(res.status==0) {
                layer.msg(res.msg,function () {
                    location.reload();
                });
            }else{
                layer.msg(res.msg);
            }
        });
    }


    var sexPicker=new mui.PopPicker();
    sexPicker.setData([{value:1,text:'男'},{value:0,text:'女'}]);

    function bindSex(){
        var _self = this;
        sexPicker.show(function (rs) {
            console.log(rs)
                $(_self).val(rs[0].text)
            });

    }


    function bindDate(){
        var _self = this;
        var birthValue = $(_self).val();
        if(_self.picker) {
            _self.picker.show(function (rs) {
                $(_self).val(rs.value)
                $(_self).text(rs.y.value+"-"+parseInt(rs.m.value)+"-"+parseInt(rs.d.value))
                _self.picker.dispose();
                _self.picker = null;
            });
        } else {
            var type,beginDate,endDate;
            type='date';
            beginDate=new Date(2000, 01, 01);
            endDate=new Date();


            _self.picker = new mui.DtPicker({
                type: type,
                value: birthValue,
                beginDate: beginDate,
                endDate: endDate
            })
            _self.picker.show(function(rs) {
                $(_self).val(rs.value)
                $(_self).text(rs.y.value+"-"+parseInt(rs.m.value)+"-"+parseInt(rs.d.value))
                _self.picker.dispose();
                _self.picker = null;
            });
        }
    }

</script>